import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import VideoPlayer from '@/components/VideoPlayer'
import { bangumiApi } from '@/api'
export default class BangumiPlayer extends PureComponent {
    static propTypes = {
        detailData: PropTypes.object
    }

    state = {
        playUrl: null
    }

    get hasDetailData() {
        return !!this.props.detailData
    }

    get info() {
        return this.props.detailData
    }

    get epInfo() {
        return this.props?.detailData?.epInfo ?? null
    }
    
    get epId() {
        return this.props?.detailData?.epInfo?.id ?? null
    }

    get epType() {
        return this.props?.detailData?.epType ?? null
    }

    get poster() {
        return this.props?.detailData?.epInfo?.cover ?? ''
    }

    get limitCode() {
        let t = 0
        if (this.hasDetailData) {      
            const area = this.info.area     
            const ssId = this.info.ssId
            const epInfo = this.epInfo
            if (area === 1) {
                t = 1
            } else if (area === 3) {
                t = 4
            } else if (ssId === -1) {
                t = 3
            } else if (this.info.epList.length === 0 && this.info.pubInfo.is_started === 0) {
                t = 2
            } else if (epInfo.from !== 'bangumi' && epInfo.from !== 'vupload') {
                t = 5
            } else if ([6, 7, 8, 9, 12, 13].indexOf(epInfo.status) >= 0) {
                t = 6
            } else if (epInfo.archive_attr) {
                t = 7
            }
        }     
        return t
    }

    get epStatus() {
        return (this.epInfo?.status ?? -1) || (this.info?.meidaInfo?.status ?? -1)
    }

    get isFree() {
        return [6, 7, 8, 9, 12, 13].indexOf(this.epStatus) < 0
    }

    get playerEnable() {        
        if (this.epId === null) {
            return false
        }
        if (this.epType === 1) {
            if ([1, 2, 3, 5, 7].indexOf(this.limitCode) >= 0) {
              return !1
            }
        }
        return !(!this.isFree || this.epInfo.archive_attr) 
        || (!this.isFree && !this.epInfo.archive_attr && !!this.info.rightsInfo.is_preview)
    }

    get maskContent() {
        let str = ''
        switch (this.limitCode) {
            case 1:
                str = '<div>非常抱歉，根据版权方要求</div><div>您所在的地区无法观看本片</div>'
                break
            case 2:
                if (this.epType !== 2) {
                    const pubInfo = this.info.pubInfo
                    str = pubInfo.unknow_pub_date === 1 ? '' : `${pubInfo.pub_time_show}即将开播`
                }
                break
            case 3:
                str = '地球上找不到该内容哦 (╥﹏╥)'
                break
            case 5:
                str = '该视频仅支持客户端观看'
                break
            case 7:
                str = '<div>本集为互动视频</div><div>请使用最新版APP或网页观看</div>'
                break
            default:
                str = ''
        }
    
        if (!this.isFree) {
            str = '<div>本片为付费内容</div><div>请前往App购买观看</div>'
        }
    
        return str   
    }

    getData = async () => {
        try {
            if (!this.playerEnable) {
                return
            }
            const { result } = await bangumiApi.getPlayUrl({
                ep_id: this.epId
            })
            if (result) {
                const { durl } = result
                this.setState({
                    playUrl: durl[0].url
                })
            }            
        } catch (error) {
            
        }
    }

    componentDidMount() {
        this.getData()
    }

    componentDidUpdate(prevProps) {        
        const prevId = prevProps.detailData.epInfo.id
        if (prevId !== this.epId) {
            this.getData()
        }
    }


    render() {
        const { playUrl } = this.state
        return (
            <div style={{position: 'sticky', left: '0', top: '44px', zIndex: 2}}>
                <VideoPlayer 
                    url={playUrl} 
                    poster={this.poster} 
                    enable={this.playerEnable}
                    maskContent={this.maskContent}
                />
            </div>
        )
    }
}
